import { ComponentProps, VueComponent } from "vue3-oop"
import { Row,Col } from 'ant-design-vue';
import FvrWidget from '../fvr-widget'
import moduleCss from './fvr-grid.module.scss'
import { WidgetNode } from '../../types'
import { GRID } from "./attr-grid";

interface IProps {
  widgetNode: WidgetNode
}
export default class FvrGrid extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  render() {
    const { widgetNode } = this.props;
    const { widgetItem } = widgetNode;
    const attr = widgetItem.GRID as GRID;

    return (
      <Row
        class={[moduleCss['fvr-grid']]}
        style={{
          flexWrap: 'wrap',
          alignContent: 'flex-start',
          minHeight: '56px',
          marginLeft: 'unset',
          marginRight: 'unset'
        }}
        gutter={attr.gutter}
      >
        {this.props.widgetNode?.children?.map((childNode:WidgetNode)=>{
          if(childNode.widgetId){
            const childItem = childNode.widgetItem;
            const childAttr = childItem[childItem.type] as any;
            return(
              <Col
                class={[moduleCss['drag-item']]} 
                {...{
                  style:{
                    height:'unset',
                  }
                }}
                {...childAttr.layout_reactive}
              >
                <FvrWidget
                  widgetNode={childNode}
                />
              </Col>
            )
          }
        })
        }
      </Row>
    )
  }
}